<template>
  <span style="margin-left: 5px; margin-right: 5px">
    <el-button @click="showMsgDialog" :type="type" size="small"  :plain="title=='留言'">{{
      title
    }}</el-button>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="400px"
      append-to-body
      :close-on-click-modal="false"
      @close="resetForm"
      :before-close="handleClose"
    >
      <slot></slot>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="toSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </span>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toSubmit() {
      let that = this;
      this.$emit("submit", function() {
        that.handleClose();
      });
    },
    handleClose() {
      this.visible = false;
    },
    resetForm() {
      this.$emit("resetForm");
    },
    showMsgDialog() {
      this.visible = true;
    }
  }
};
</script>
